<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-page-header content="需求详情" @back="$router.back()" />
			<div class="btnR" v-if="formData.status == 1">
				<el-button type="danger" plain @click="handleCheck(3)">审核驳回</el-button>
				<el-button type="primary" @click="handleCheck(2)">审核通过</el-button>
			</div>
		</el-card>
		<el-card class="mt-4 !border-none" header="需求信息" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">
				<el-form-item label="所需额度：">{{(formData.quota/10000).toFixed(4)}}万</el-form-item>
				<el-form-item label="资金用途：">{{formData.fund_use_desc}}</el-form-item>
				<el-form-item label="年龄：">{{formData.age}}</el-form-item>
				<el-form-item label="需要产品：">
					<span v-for="(item,index) in formData.cates" :key="'cates'+index">{{item.name}}、</span>
				</el-form-item>
				<el-form-item label="资产情况：">{{formData.property_desc}}</el-form-item>
				<el-form-item label="征信情况：">{{formData.credit_level}}</el-form-item>
				<el-form-item label="其他情况：">{{formData.other_desc}}</el-form-item>
				<el-form-item label="附件信息：">
					<!-- <el-avatar v-for="(item,index) in formData.image_urls" :key="'image_urls'+index" :src="[item]" :preview-src-list="item" :size="58" /> -->
					<el-image style="width: 58px; height: 58px"
						v-for="(item,index) in formData.image_urls" :key="'image_urls'+index" 
						:src="item"
						:zoom-rate="1.2"
						:max-scale="7"
						:min-scale="0.2" 
						fit="contain"
						:preview-teleported="true"
						:initial-index="index"
						:preview-src-list="formData.image_urls"></el-image>
				</el-form-item>
				<el-form-item label="创建时间："> {{ formData.create_time }} </el-form-item>
			</el-form>
		</el-card>
		<el-card class="mt-4 !border-none" header="发布人信息" shadow="never">
			<table class="dataTable" border="0" cellspacing="0">
				<tbody>
					<tr>
						<th>姓名</th>
						<th>头像</th>
						<th>组织机构名称</th>
						<th>手机号</th>
					</tr>
					<tr>
						<td>{{formData.user.real_name}}</td>
						<td>
							<el-avatar :src="[formData.user.avatar]" :size="58" />
						</td>
						<td>{{formData.userCompany?formData.userCompany.business_name:'-'}}</td>
						<td>{{formData.user.account}}</td>
					</tr>
				</tbody>
			</table>
		</el-card>
		<check_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></check_demand>
	</div>
</template>

<script lang="ts" setup name="demandReviewDetail">
	import type { FormInstance } from 'element-plus'
	import { demandDetail, demandCheck } from '@/api/demand/lists';
	import { isEmpty } from '@/utils/util'
	import check_demand from './check_demand.vue'
	const route = useRoute()
	const formData:any = reactive({
		quota: 0,
		fund_use_desc: '',
		age: 0,
		cates: [],
		property_desc: '',
		credit_level: '',
		other_desc: '',
		image_urls: [],
		create_time: '',
		user: {},
		status: '',
		userCompany: {}
	})

	const checkState = reactive({
		show: false,
		value: ''
	})
	
	const handleCheck = (value : any) => {
		console.log(value)
		checkState.show = true
		checkState.value = value
	}
	
	const handleConfirmCheck = async (value : any) => {
		console.log(value);
		await demandCheck({ id: Number(route.query.id), ...value })
		checkState.show = false
		getDetails()
	}
	
	const formRef = shallowRef<FormInstance>()

	const getDetails = async () => {
		const data = await demandDetail({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
			// if( key=='image_urls' ){
			// 	console.log(data[key],123456);
			// 	formData[key] = data[key][0]
			// }
		})
	}

	getDetails()
</script>
<style scoped lang="scss">
	.btnR{
		position: absolute;
		right: 50px;
		top: 30px;
	}
	// .dataTable {
	// 	width: 80%;
	// 	line-height: 40px;
	// 	text-align: left;
	// 	border-top: 1px solid #eaeaea;
	// 	border-left: 1px solid #eaeaea;
	// 	border-right: 1px solid #eaeaea;

	// 	tr {
	// 		// display: flex;

	// 		th {
	// 			flex: 1;
	// 			height: 40px;
	// 			padding: 0 16px;
	// 			font-weight: 500;
	// 			font-size: 12px;
	// 			color: #fff;
	// 			// background: #f9f8f8;
	// 			border-bottom: 1px solid #eaeaea;
	// 			border-right: 1px solid #eaeaea;
	// 		}

	// 		td {
	// 			flex: 1;
	// 			min-height: 40px;
	// 			padding: 8px 16px;
	// 			box-sizing: border-box;
	// 			font-size: 12px;
	// 			color: #fff;
	// 			border-bottom: 1px solid #eaeaea;
	// 			border-right: 1px solid #eaeaea;
	// 		}
	// 	}
	// }
</style>